<template>
	<div class="spect">
		<ul class="tab-row" v-for="item of tabRowList">
			 <li class="tab-col" v-for="item of tabColList"></li>
		</ul>
		<div class="spect-data">
			 <div class="tab-col-data" v-for="item of sortlist" :class="{bggreen:item.isHave,'bgred':item.overtime }" :key="item.id">
			 	  <div class="data-ranks" >{{item.ranks}}</div>
			 	  <div class="data-temp-time">{{item.tempTime}}</div>
			 </div>
		</div>
	</div>
</template>
<script>
export default{
	props:{
       list:Array   
	},
    data (){
    	return{
            tabRowList:["1","2","3","4","5","6"],
            tabColList:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"]
            
    	}
    		 
    },
    methods:{

    },
    computed:{
        sortlist: function () {
	       return this.list.sort(function(a,b){
	           if(a.line ===b.line){
		       		return a.colum - b.colum
		       	}else {
		       		return a.line - b.line
		       	}
	       });

	    }
    },
    mounted () {
 
    }
}
</script>
<style  scoped>
.spect{
	width:1800px;
	height:456px;
	position:relative;
	box-sizing:border-box;
}
	
.tab-row{
	height:76px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tab-col{
	width:72px;
	height:76px;
	border:2px solid #383A53;
	box-sizing:border-box;
	background:#fff;
	border-radius:6px;
}

.spect-data{
	position:absolute;
	top:0;
	left:0;
	width:1800px;
	height:456px;
	overflow:hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap:wrap;
}

.tab-col-data{
	width:72px;
	height:76px;
	box-sizing:border-box;
	padding:15px 0;
	color:#383A53;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
			
.bggreen{
	background:rgb(109,203,153);
	border:2px solid #383A53;
	border-radius:6px;
}

.bgred{
	background:rgb(243,98,121);
	border:2px solid #383A53;
	border-radius:6px;
}

</style>